<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/9/6
  Time: 22:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/common/common.jsp"%>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function checkPhone(){
            $.ajax({
                url:"<%=path%>/user/checkPhone",
                type:"get",
                dataType:"json",
                data: {uname:$("[name=uname]").val()},
                async : true,
                success : function (result){
                    if(result ) {
                        $("#msg").html("<font color='#ff7f50'>√</font>");
                        $("#btn").attr("onclick","register()");
                    }else {
                        $("#msg").html("<font color='red'>该账号已被注册</font>");
                        $("#btn").attr("onclick","");
                    }
                },
                error : function (result){//错误回调函数
                    alert("网络异常，请刷新");
                }
            })

        }
        function register(){
            $.ajax({
                url:"<%=path%>/user/register",
                type:"post",
                dataType:"json",
                data: $("#register_Form").serialize(),
                async : true,
                success : function (result){
                   location.href="<%=path%>/login.jsp";
                },
                error : function (result){//错误回调函数
                    alert("网络异常，请刷新");
                }
            })

        }
        $(function () {
            $('#testfile').fileinput({
                language: 'zh',
                uploadUrl: "<%=path%>/file/upLoadFile",
                maxFileSize: 1204,
                maxFileCount: 5,
                enctype: "multipart/form-data",
                allowedFileExtensions: ["jpg", "jpeg", "png", "pdf", "word", "xls", "xlsx"],
                browseClass: 'btn btn-primary'
            });
            $("#testfile").on("fileuploaded", function (event, data, previewId, index) {
                var imgUrl = data.response.imgUrl;
                $("#userImg").val(imgUrl);
            })
        })
            function change_img() {
                $("#img_id").attr("src", "<%=path%>/code/vcode?time=" + new Date().toLocaleDateString());
                $.get("<%=path%>/code/getCode",function (result) {
                    $("[name=code]").val(result);
                })
            }
    </script>
</head>
<body>
    <div class="container-fluid" align="center">
        <div class="panel panel-primary" style="width:300px;">
            <div class="panel-heading">
                <h3>欢迎您</h3>
            </div>
            <div class="panel-body">
                <form id="register_Form"  >
                    <div class="form-group">
                        <label for="name">用户名</label>
                        <input type="text" class="form-control" name="uname" id="name"
                               placeholder="请输入用户名" onblur="checkPhone()" ><br>
                        <span id="msg"></span>
                        <div id="tips"></div>
                    </div>
                    <div class="form-group">
                        <label for="pwd">请输入密码</label>
                        <input type="password" class="form-control" name="password" id="pwd">
                    </div>
                    <div class="form-group">
                        <label for="testfile">上传</label>
                        <input type="file" id="testfile" name="myFile" multiple />
                        <input type="hidden" name="userImg" id="userImg">
                    </div>
                    <div class="form-group">
                        <label for="vcode">请输入验证码</label>
                        <input type="text" class="form-control" name="code" id="vcode"
                               placeholder="请输入验证码">
                        <img  id="img_id" src="<%=path%>/code/vcode" onclick="change_img()">
                    </div>
                    <input type="button" class="btn btn-success btn-lg" value="注册" id="btn" onclick="register()">
                </form>
            </div>

        </div>
    </div>
</body>
</html>
